<template>
  <page-header-wrapper>
    <a-card :bordered="false">
      <a-form-model :model="form" :label-col="{span:4}" :wrapper-col="{span:14}">
        <a-form-model-item label="站点名称">
          <a-input v-model="form.site_name"></a-input>
        </a-form-model-item>

        <a-form-model-item label="站点介绍">
          <a-textarea v-model="form.site_des" placeholder="请输入站点介绍" :row="8"></a-textarea>
        </a-form-model-item>

        <a-form-model-item label="站点LOGO">
          <a-upload
            name="avatar"
            list-type="picture-card"
            class="avatar-uploader"
            :show-upload-list="false"
            action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
            :before-upload="beforeUpload"
            @change="handleChange"
          >
            <img v-if="form.site_logo" :src="form.site_logo" alt="avatar" />
            <div v-else>
              <a-icon :type="loading ? 'loading' : 'plus'" />
              <div class="ant-upload-text">点击上传站点LOGO</div>
            </div>
          </a-upload>
        </a-form-model-item>

        <a-form-model-item label="站点ICP备案号">
          <a-input v-model="form.site_name"></a-input>
        </a-form-model-item>

        <a-form-model-item label="站点公安网备号">
          <a-input v-model="form.site_name"></a-input>
        </a-form-model-item>

        <a-form-model-item label="站点状态">
          <a-switch v-model="form.site_status" />
        </a-form-model-item>

        <a-form-model-item label="第三方统计">
          <a-textarea v-model="form.site_des" placeholder="仅输入<script>标签内的内容" :row="10"></a-textarea>
        </a-form-model-item>

        <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
          <a-button type="primary" @click="onSubmit">保存</a-button>
        </a-form-model-item>
      </a-form-model>
    </a-card>
  </page-header-wrapper>
</template>

<script>
function getBase64 (img, callback) {
  const reader = new FileReader()
  reader.addEventListener('load', () => callback(reader.result))
  reader.readAsDataURL(img)
}
export default {
  data () {
    return {
      form: {
        site_name: null,
        site_des: null,
        site_logo: null,
        site_status: true
      },
      loading: false
    }
  },
  methods: {
    handleChange (info) {
      if (info.file.status === 'uploading') {
        this.loading = true
        return
      }
      if (info.file.status === 'done') {
        // Get this url from response in real world.
        getBase64(info.file.originFileObj, (imageUrl) => {
          this.site_logo = imageUrl
          this.loading = false
        })
      }
    },
    beforeUpload (file) {
      const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
      if (!isJpgOrPng) {
        this.$message.error('You can only upload JPG file!')
      }
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isLt2M) {
        this.$message.error('Image must smaller than 2MB!')
      }
      return isJpgOrPng && isLt2M
    },
    onSubmit () {
      console.log('er')
    }
  }
}
</script>
